<template>
	<view id="xiex-image-container">
		<transition>
			<image :src="src" :mode="mode" v-show="flag" @load="handleOnload"></image>
		</transition>
			<image src="../../static/bg.jpg" :mode="mode" v-show="!flag"></image>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false
			};
		},
		props: {
			src: {
				type: String
			},
			bgUrl: {
				type: String
			},
			mode: {
				type: String,
				default: 'scaleToFill'
			}
		},
		methods:{
			handleOnload(){
				this.flag = true
			}
		}
			
		
	}
</script>

<style lang="less">
	#xiex-image-container {
		overflow: hidden;
		width: 100%;
		height: 100%;
		margin: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.v-enter-active, .v-leave-active {
	      transition: all 1s
	}
	.v-enter, .v-leave-active {
	      opacity: 0.05
	}
	
</style>
